<template>
  <div class="frame">
    <headerTop class="header-top"
               :appName="this.$route.query.name"
               :icon="this.$route.query.icon"
               :userN="userN"
    ></headerTop>
    <div class="content-botton">
      <leftMenu class="left-menu"
                :datas="datas"
                :defaultActive="defaultActive"
                @handleSelect="handleSelect"
      ></leftMenu>
      <div class="right-content">
        <headBox class="header-box"
                 :fristPath="fristPath"
                 @tabClick="tabClick"
                 @delClick="delClick"
                 @closeOther="closeOther"
                 @closeAll="closeAll"
        ></headBox>
        <div class="content">
          <iframe id="ifr" src="" frameborder="0" class="iframe-box"
                  scrolling="no" ref="ifr"></iframe>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapGetters, mapActions} from 'Vuex';
  import leftMenu from './leftMenu/LeftMenu';
  import headerTop from './headerTop/headerTopLogic';
  import headBox from './rightContent/head/HeadBox';
  import {localUitl} from '@/utils/localUitl'

  export default {

    components: {
      leftMenu,
      headerTop,
      headBox// name
    },
    name: "frameView",
    props: {
      // msg: String //  [name: typeof]
    },
    filters: {},
    computed: {
      ...mapGetters(['getRouterModel'])
    },
    watch: {
      getRouterModel(newV) {
        this.defaultActive = newV.url;
      }
    },
    data() {
      return {
        defaultActive: "",
        datas: [],
        fristPath: "",
        userN: {},
        configMap: [],
        nav: window.navigator
      }
    },
    created() {
      this.getUserN();
    },
    mounted() {
      let {clientId, build_type} = this.$route.query;
      let obj = {
        type: "menu",
        clientIdQuery: clientId,
        access_token: localUitl.getToken()
      };
      _https.get.getActivilys(obj).then(res => {
        if (res.status == 200) {
          let data = res.data;
          this.datas = this.setConfigMap(data);
          // 设置默认展开的项
          let url = this.diGui(this.datas[0]);
          this.$refs.ifr.src = url;
          // this.changeUrl(url);
          this.defaultActive = url;
          this.fristPath = url;
        }
      })
    },
    methods: {
      ...mapActions(['setRouterModel']),
      handleSelect(url) {
        this.changeUrl(url);
        this.setRouterModel({url: url});
      },
      tabClick(url) {
        this.changeUrl(url);
      },
      delClick(url) {
        this.changeUrl(url);
      },
      closeOther(url) {
        this.changeUrl(url);
      },
      closeAll(url) {
        this.changeUrl(url);
      },
      changeUrl(url) {
        if (this.nav.userAgent.indexOf('Trident') > -1) { //非IE的浏览器
          this.$refs.ifr.src = "";
          setTimeout(() => {
            this.$refs.ifr.src = url;
          }, 50);
        } else {
          this.$refs.ifr.src = url;
        }
      },
      // 实在不知道想什么名字就叫递归了
      diGui(obj) {
        if (obj.childs && obj.childs.length > 0) {
          return this.diGui(obj.childs[0]);
        } else {
          let url = obj.url;
          return url
        }
      },
      buildSel(url) {
        let {build_type} = this.$route.query;
        if (build_type == "2") {
          return url.indexOf("?") == -1 ? `${url}?access_token=${localUitl.getToken()}` : `${url}&access_token=${localUitl.getToken()}`
        } else {
          return url;
        }
      },
      /**
       * 根据路径获得对应的配置项
       * @param {Object} data 路径
       */
      setConfigMap(data) {
        for (let item of data) {
          let childs = item.childs;
          let isLeaf = childs ? childs.length === 0 : true;
          if (isLeaf) {
            item.url = this.buildSel(item.url);
          } else {
            this.setConfigMap(item.childs);
          }
        }
        return data;
      },
      getUserN() {
        let obj = {
          access_token: localUitl.getToken()
        }
        _https.get.getUserN(obj).then(res => {
          if (res.status == 200) {
            this.userN = res.data;
          }
        })
      }
    },
    destroyed() {

    }
  }
</script>

<style lang="less">
  @import url("./frame");
</style>
